/*
 * @Author: zhangxin
 * @Date: 2020-10-12 11:16:50
 * @Last Modified by: zhangxin
 * @Last Modified time: 2020-10-14 15:26:17
 *
 * 图标选择下拉框
 */

import React, { useState, useEffect, useRef } from 'react';
import { Select, Input, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import iconfontModel from '@/assets/iconfont/iconfont-model.json';
import './HcpIconSelect.less';

const { glyphs, font_family, css_prefix_text } = iconfontModel;

const HcpIconSelect = (props) => {
    const { onChange, ...prop } = props;
    const [iconData, setIconData] = useState([]);
    const [searchData, setSearchData] = useState([]);
    const [listHeight, setListHeight] = useState(0);
    const [translateY, setTranslateY] = useState(0);
    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        setSearchData(glyphs);
        setIconData(glyphs);
    }, []);

    const init = (data) => {
        setSearchData(data);
        setListHeight((data.length / 4) * 32 + 32);
        setIconData(data.slice(4 * translateY, 4 * 8 + 4 * translateY));
    };

    const handleChange = (value) => {
        if (onChange) onChange(value);
    };

    const handleSearch = (e) => {
        let value = e.target.value;
        setInputValue(value);
        if (value) {
            let arr = [];
            for (const item of glyphs) {
                if (item.name.indexOf(value) > -1) {
                    arr.push(item);
                }
            }
            init(arr);
        } else {
            init(glyphs);
        }
    };

    const handleDropdownVisibleChange = (open) => {
        if (open) {
            setInputValue('');
            init(glyphs);
        }
    };

    const handlePopupScroll = (e) => {
        e.persist();
        const { target } = e;
        let h = parseInt(target.scrollTop / 32);
        setTranslateY(h);
        setIconData(searchData.slice(4 * h, 4 * 8 + 4 * h));
    };

    return (
        <div id="iconArea" style={{ position: 'relative' }}>
            <Select
                {...prop}
                onChange={handleChange}
                allowClear
                dropdownMatchSelectWidth={false}
                getPopupContainer={() => document.getElementById('iconArea')}
                // listItemHeight={4}  // 不要修改此属性
                listHeight={null}
                onPopupScroll={null}
                onDropdownVisibleChange={handleDropdownVisibleChange}
                dropdownRender={(originNode) => {
                    return (
                        <div className="hcp_icon_select">
                            <div className="hcp_icon_search">
                                <Input
                                    placeholder="请输入图标名称"
                                    value={inputValue}
                                    suffix={<SearchOutlined />}
                                    onChange={handleSearch}
                                />
                            </div>
                            <div
                                className="hcp_icon_list"
                                onScroll={handlePopupScroll}
                            >
                                <div style={{ height: `${listHeight}px` }}>
                                    <div
                                        style={{
                                            transform: `translateY(${
                                                32 * translateY
                                            }px)`,
                                            position: 'absolute',
                                            left: '0px',
                                            right: '0px',
                                            top: '0px',
                                        }}
                                    >
                                        {originNode}
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                }}
            >
                {iconData.map((item, index) => (
                    <Select.Option
                        key={index}
                        value={`${css_prefix_text}${item.font_class}`}
                    >
                        <div className="flex-row flex-align-center">
                            <span
                                className={`${font_family} ${css_prefix_text}${item.font_class}`}
                             />
                            <Tooltip title={item.name}>
                                <span className="hcp_icon_name">
                                    {item.name}
                                </span>
                            </Tooltip>
                        </div>
                    </Select.Option>
                ))}
            </Select>
        </div>
    );
};

export default HcpIconSelect;
